<div class="layui-fluid" >
    <script type="text/html" template>
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" action="" lay-filter="editForm">
                    <input type="hidden" name="id" value="{{d.id}}"/>
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="type" lay-filter="type" value="0" title="目录">
                            <input type="radio" name="type" lay-filter="type" value="1" title="菜单">
                            <input type="radio" name="type" lay-filter="type" value="2" title="资源">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" id="name"><span style="color: red">*</span>菜单名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" value="{{d.name}}" autocomplete="off" placeholder="请输入" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item type0 type1">
                        <label class="layui-form-label">菜单图标</label>
                        <div class="layui-input-block">
                            <input type="hidden" id="iconValue" value="{{d.icon}}" name="icon"/>
                            <input type="text" id="iconCode"  autocomplete="off" placeholder="请选择" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" id="parent">所属位置</label>
                        <input type="hidden" name="parentId" id="parentId" value="{{d.parentId}}"/>
                        <!--验证   无 - 根目录  0 -目录  1 - 菜单   -->
                        {{# if(d.parentId==0){ }}
                            <input type="hidden" id="verify" value=""/>
                        {{# }else{ }}
                            {{# if(d.type == 0){ }}
                                    <input type="hidden" id="verify" value="0"/>
                            {{# }else if(d.type == 1){ }}
                                    <input type="hidden" id="verify" value="0"/>
                            {{# }else if(d.type == 2){ }}
                                    <input type="hidden" id="verify" value="1"/>
                            {{# }}}
                        {{#  } }}
                        <div class="layui-input-block">
                            <input type="text" id="parentName" value="{{d.parentName?d.parentName:''}}" lay-filter="parentName" placeholder="为空表示根节点" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item type1">
                        <label class="layui-form-label"><span style="color: red">*</span>菜单路径</label>
                        <div class="layui-input-block">
                            <input type="text" name="url" placeholder="包含参数 例如：/sys/log/list/name=3333/type=1" value="{{d.url?d.url:''}}" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">排序号</label>
                        <div class="layui-input-block">
                            <input type="number" value="{{d.orderNum}}" name="orderNum"   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item type1 type2" style="display: none">
                        <label class="layui-form-label">授权标识</label>
                        <div class="layui-input-block">
                            <input type="text" name="perms" value="{{d.perms?d.perms:''}}"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <input type="hidden" name="isShow" id="isShow"  value="{{d.isShow}}" />
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            {{# if(d.isShow==1){ }}
                            <input type="checkbox" checked="" lay-skin="switch" lay-filter="isShow" lay-text="是|否">
                            {{# }else{ }}
                            <input type="checkbox"  lay-skin="switch" lay-filter="isShow" lay-text="是|否">
                            {{# } }}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a class="layui-btn" lay-submit="" lay-filter="editMenuSubmit">立即提交</a>
                            <a class="layui-btn layui-btn-primary" id="close">关闭</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </script>
</div>

<script>
    var EditMenu = function (rowData,index) {
        var $this = this;
        var admin = layui.admin,
            form = layui.form,
            $ = layui.jquery,
            treeSelect = layui.treeSelect,
            iconPicker = layui.iconPicker;
        //初始化
        this.init = function () {
            //初始化 类型
            form.val('editForm',{
                type:rowData.type
            });
            //初始化  树形 下拉
            $this.initTreeSelect();
            //初始化图标选择
            $this.initIconPicker();
            //初始化类型
            $this.initType($("input[type='radio']:checked").val());
            //初始化表单
            form.render();
            /* 监听指定开关 */
            form.on('switch(isShow)', function (data) {
               if(this.checked){
                    $("#isShow").val(1);
               }else{
                   $("#isShow").val(0);
               }
            });

            /* 监听提交 */
            form.on('submit(editMenuSubmit)', function (data) {
                var requestData = data.field;
                if(!$("#parentId").val() && data.field.type == 2){  //所属位置 为空    //按钮
                    admin.error('请选择所属位置');
                    return false;
                }
                if($("#parentId").val()!=0 && data.field.type == 2 && $("#verify").val() != 1){            //按钮
                    admin.error('所属位置，请选择根节点菜单');
                    return false;
                }
                if($("#parentId").val()!=0 && data.field.type == 1 && $("#verify").val() != 0){            //菜单
                    admin.error('所属位置，请选择根节点目录');
                    return false;
                }
                if($("#parentId").val()!=0 && data.field.type == 0 && $("#verify").val() != 0){            //菜单
                    admin.error('所属位置，请选择节点目录');
                    return false;
                }
                //提交用户
                admin.post({
                    api:'updateMenu',
                    data:JSON.stringify(requestData),
                    contentType: 'application/json;charset=UTF-8',
                    success:function (res) {
                        if(res.code == 0){
                            admin.success('操作成功',function () {
                                parent.menuList.refresh();
                                parent.layer.close(index);
                            });
                        }
                    }
                });
                return false;
            });
            //关闭窗口
            $("#close").click(function () {
                parent.layer.close(index);
            });
            /*单选按钮事件监听*/
            form.on('radio(type)', function (data) {
                $this.initType(data.value);
            });
        };
        //初始化  树形 下拉
        this.initTreeSelect = function () {
            treeSelect.render({
                // 选择器
                elem: '#parentName',
                // 数据
                api: 'getSelectMenuList',
                // 是否开启搜索功能：true/false，默认false
                search: false,
                // 点击回调
                click: function(d){
                    $("#verify").val(d.current.type);
                    $("#parentId").val(d.current.id);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    // 选中节点，根据id筛选
                    if($("#parentId").val() > 0){
                        treeSelect.checkNode('parentName', $("#parentId").val());
                    }
                }
            });
        };
        //初始化图标选择
        this.initIconPicker = function () {
            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#iconCode',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'fontClass',
                // 是否开启搜索：true/false
                search: false,
                // 是否开启分页
                page: true,
                // 每页显示数量，默认12
                limit: 30,
                // 点击回调
                click: function (data) {
                    $("#iconValue").val(data.icon)
                }
            });
            if($("#iconValue").val()){
                //默认选中图标
                iconPicker.checkIcon('iconPicker', $("#iconValue").val());
            }
        };
        //初始化类别
        this.initType = function (num) {
            if(num == 0){  //目录
                $("#name").html('<span style="color: red">*</span>目录名称');
                $("#icon").html("目录图标");
                $("#parent").html('所属位置');
                $("#parentName").removeAttr("lay-verify");
                $("#parentName").attr("placeholder","为空表示根节点");
                $("input[name='url']").removeAttr("lay-verify");
                $("#verify").val("");
                $(".type1").hide();
                $(".type2").hide();
                $(".type0").show();
            }else if(num == 1){ //菜单
                $("#icon").html("菜单图标");
                $("#name").html('<span style="color: red">*</span>菜单名称');
                $("#parent").html('所属位置');
                $("#parentName").removeAttr("lay-verify");
                $("#parentName").attr("placeholder","为空表示根节点");
                $("input[name='url']").attr("lay-verify");
                $("#verify").val(0);
                $(".type0").hide();
                $(".type2").hide();
                $(".type1").show();
            }else if(num == 2){//按钮
                $("#name").html('<span style="color: red">*</span>按钮名称');
                $("#parent").html('<span style="color: red">*</span>所属位置');
                $("#parentName").attr("lay-verify");
                $("#parentName").attr("placeholder","不能为空");
                $("input[name='url']").removeAttr("lay-verify");
                $("#verify").val(1);
                $(".type0").hide();
                $(".type1").hide();
                $(".type2").show();
            }
        }
    };

</script>